<script lang="ts" setup>import { getCurrentInstance } from "@vue/runtime-core";

const { proxy } = getCurrentInstance()

</script>

<template>
  <div class="qrcode-container">
    <div class="qrcode-header">
      <div style="width: 30%;" class="qrcode-detail-item">
        <span class="label">
          姓名
        </span>
        <span class="value">
          张三
        </span>
      </div>
      <div style="width: 70%;" class="qrcode-detail-item">
        <span class="label">
          证件号码
        </span>
        <span class="value">
          3303 0219 9204 0116 14
        </span>
      </div>
      <div class="qrcode-detail-item">
        <span class="label">
          所属企业
        </span>
        <span class="value">
          温岭市创兴垃圾清运有限公司
        </span>
      </div>
    </div>
    <div class="qrcode-main">
      <div class="top">
        <div class="left">
          更新于：2020年10月13日 09:58:09
        </div>
        <div class="right">
          <van-icon name="question-o" />
        </div>
      </div>
      <div class="score-box">
        <span class="score">
          20
        </span>
        分
      </div>
      <div class="qrcode-box">
        <div class="qrcode-img">
          <img src="" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.qrcode-container {
  padding: 16px;
  background: #F5F5F0;
  height: 100vh;
  .qrcode-header{
    padding: 16px;
    background-color: #3988FF;
    color: white;
    min-height: 124px;
    border-radius: 4px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .qrcode-detail-item{
      display: flex;
      flex-direction: column;
      justify-content: left;
      text-align: left;
      .label{
        font-size: 13px;
        color: #FFFFFF;
        line-height: 18px;
      }
      .value{
        font-size: 16px;
        line-height: 22px;
        font-weight: bold;
      }
    }
  }
  .qrcode-main{
    padding: 16px;
    background-color: white;
    border-radius: 4px;
    .top{
      display: flex;
      justify-content: space-between;
      .left{
        font-size: 15px;
        color: #666666;
      }
      .right{
        color: #666666;
      }
    }
    .score-box{
      margin-top: 23px;
      text-align: center;
      .score{
        color: #00CB95;
        font-size: 58px;
        line-height: 81px;
        font-weight: bold;
      }
    }
    .qrcode-box{
      margin-top: 14px;
      margin-bottom: 16px;
      display: flex;
      justify-content: center;
      .qrcode-img{
        border: 2px solid #EEEEEE;
        padding: 20px;
        img{
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}
</style>
